<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>9.Promise解决回调地狱</title>
		<script type="text/javascript" src="./axios.js"></script>
		<script type="text/javascript" src="./jquery.js"></script>
	</head>
	<body>
		<!-- 
				需求：第一次请求成功，再发第二次，第二次成功，再发第三次。
				层层嵌套的回调函数，就是回调地狱。
		-->
		<button id="btn">点我</button>

		<script type="text/javascript" >
			let btn = document.getElementById('btn')
			//准备好三个请求地址
			let url1 = 'http://49.232.112.44/api/product/getBaseCategoryList'
			let url2 = 'http://49.232.112.44/api/product/getBaseCategoryList'
			let url3 = 'http://49.232.112.44/api/product/getBaseCategoryList'

			btn.onclick = async()=>{
				try {
					//发第一次请求
					let result1 = await axios.get(url1)
					console.log('第一次成功了',result1)
					//发第二次请求
					let result2 = await axios.get(url2)
					console.log('第二次成功了',result2)
					//发第三次请求
					let result3 = await axios.get(url3)
					console.log('第三次成功了',result3)
				} catch (error) {
					console.log(error)
				}
			}

			//究其根本：解决回调地狱是用了：三种状态 + then的返回值
			//日常编码：使用 async  await 

		</script>
	</body>
</html>